<template>
  <div class="pointernoevent" style="height: 100%;">
    <!-- 二维元素 -->
    <!-- 背景组件 -->
    <!-- 动态行元素 -->
    <!-- 背景shadow -->
    <BackfroundDiv :backtype="setting.backgroundType" v-if="ifcontainerdiv">
      <div style="display: flex;flex-direction: column;height: 100%;">
        <!-- rows -->
        <div
          v-for="eachrow in setting.rows"
          :style="{flex: eachrow.flex,display: 'flex',flexDirection: eachrow.flexDirection, height: '100%'}"
        >
          <BackfroundDiv :backtype="eachrow.backgroundType">
            <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
              <!-- topblocks -->
              <div
                :class="['pointernoevent']"
                :style="topblockstyle(eachtopblock)"
                v-for="eachtopblock in eachrow.topblocks"
              >
                <div
                  :style="{display: 'flex',flex: eachmiddleblock.flex,flexDirection: eachmiddleblock.flexDirection}"
                  v-for="eachmiddleblock in eachtopblock.middleblocks"
                >
                  <!-- 每个小区块block -->
                  <div
                    class
                    v-for="eachblock in eachmiddleblock.blocks"
                    :style="{flex: eachblock.flex}"
                  >
                    <!-- 判断组件是否隐藏 -->
                    <div v-show="showhidepannel(eachtopblock.name)" style="height: 100%;">
                      <!-- 边框组件 -->
                      <component
                        :is="eachblock.borderOptions.borderType"
                        v-if="eachblock.borderOptions.borderType"
                        :borderOptions="eachblock.borderOptions"
                      >
                        <!-- 数据展示组件 -->
                        <component
                          :is="eachblock.componentDetail.type"
                          :componentDetail="eachblock.componentDetail"
                          style="pointer-events: auto;"
                        ></component>
                      </component>
                    </div>
                    <div v-show="!showhidepannel(eachtopblock.name)"></div>
                  </div>
                </div>
              </div>
            </div>
          </BackfroundDiv>
        </div>
      </div>
    </BackfroundDiv>

    <!-- api组件 -->
    <component :is="item" v-for="item in apilist"></component>
  </div>
</template>

<script>
import setting from "../setting.json";

export default {
  name: "index",
  components: {},

  watch: {
    "$store.state.daping.showhidearr": {
      handler: function(n, o) {
        // this.
      }
    }
  },

  computed: {
    //获取api组件列表
    apilist: function() {
      let apicoms_arr = Object.keys(this.comrefer);
      let apicoms = {};
      setting.rows.map(each_row => {
        each_row.topblocks.map(each_topblock => {
          each_topblock.middleblocks.map(each_middleblock => {
            each_middleblock.blocks.map(each_block => {
              each_block.componentDetail.type;
              if (apicoms_arr.indexOf(each_block.componentDetail.type) != -1) {
                this.comrefer[each_block.componentDetail.type].map(item => {
                  apicoms[item] = 1;
                });
              }
            });
          });
        });
      });
      return Object.keys(apicoms);
    },

    //
    topblockstyle() {
      let _this = this;
      return function(params) {
        if (_this.showhidepannel(params.name)) {
          return {
            flex: params.flex,
            display: "flex",
            flexDirection: params.flexDirection,
            height: "100%",
            ...params.componentOptions.styleses
          };
        } else {
          return {
            flex: params.flex,
            display: "flex",
            flexDirection: params.flexDirection,
            height: "100%"
          };
        }
      };
    },
    // 获取显示隐藏数组
    showhidearr() {
      return this.$store.state.daping.showhidearr;
    },
    // 获取显示隐藏数组判断结果
    showhidepannel() {
      return function(params) {
        //判断无配置项的
        let allpannelarr = [];
        Object.keys(this.pannelcom).map(item => {
          this.pannelcom[item];
          allpannelarr = allpannelarr.concat(this.pannelcom[item]);
        });
        if (allpannelarr.indexOf(params) == -1) {
          return true;
        } else {
          //获取列表
          let showarr = [];
          let pannelarr = this.showhidearr;
          pannelarr.map(item => {
            showarr = showarr.concat(this.pannelcom[item]);
          });

          //判断组件是否存在列表
          if (showarr.indexOf(params) != -1) {
            return true;
          } else {
            return false;
          }
        }
      };
    }
  },

  data() {
    return {
      //面板与组件对照表
      pannelcom: {
        leftpannel: ["titlerowone", "contentrowone"],
        rightpannel: ["titlerowthree", "contentrowthree"],
        warnpannel: ["contentone111"]
      },
      //组件api对照表
      comrefer: {
        tianshunum: ["APIBigScreen"],
        shishinum: ["APIqueryDbPipenet"],
        jihuanum: ["APIBigScreen"],
        gongrenum: ["APIBigScreen"],
        mianjinum: ["APIqueryDbPipenet"],

        datatablereyuan: [
          "APIqueryDbPipenet",
          "APIqueryDbHeatplant",
          "APIqueryDbSubstation"
        ],

        datatableguanwang: ["APIqueryDbPipenet"],
        chartringchartguanwang: ["APIqueryDbPipenet"],
        chartbarchartzhongyao: ["APIqueryDbMeasuredpoint"],

        chartpiechartgongre: ["APIqueryDbPipenet"],
        chartbarchartbushui: ["APIconnectorList", "APIqueryDbConnector"],

        chartlinechartquanwang: [
          "APIBigScreen",
          "APIqueryDbPipenetColSa_003qc"
        ],
        chartlinechartgonglv1: ["APImanageHeatPlant"],
        chartlinechartgonglv2: ["APImanageHeatPlant"]
      },

      isshowdia: false,
      btnlist: [
        { name: "aaa1", icon: "qiche" },
        { name: "aaa2", icon: "jinggai" },
        { name: "aaa3", icon: "jietouzuoyi" },
        { name: "aaa4", icon: "shebeizhuangtai" }
      ],
      activename: "",
      ifcontainerdiv: false,
      styleObject: {
        color: "red",
        fontSize: "13px"
      },

      leftdiva: {
        flex: 25
      },

      middlediva: {
        flex: 50
      },

      rightdiva: {
        flex: 25
      },

      leftjson: {},
      middlejson: {},
      rightjson: {},

      setting: {}

      // layout
    };
  },

  created() {
    this.$root.setting.scale = setting.scale;
    this.$root.setting.data = setting;
  },

  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //动态渲染左中右
      //动态渲染左侧；获取左侧数据
      this.setting = setting;
      this.ifcontainerdiv = true;
    },

    diaclick() {
      this.isshowdia = false;
      this.$store.state.app.dataSetting = JSON.parse(this.setting);
      this.loadData();
    }
  }
};
</script>

<style lang='scss' scoped>
.wm {
  width: 50%;
  margin: 5px;
}

.pointernoevent {
  pointer-events: none;
}

.topblock {
}

.block {
}

.eachblock {
}

.commonstyle {
  background-color: #5553;
  color: red;
}
</style>
